<template>
<view>
<form>
	<view class="cu-form-group margin-top">
		<view class="title"><text class="color">*</text>姓名</view>
		<input placeholder="请输入姓名" @input="inputName"></input>
	</view>
	<view class="cu-form-group ">
		<view class="title"><text class="color">*</text>店铺名称</view>
		<input placeholder="店铺名称" @input="inputShopName"></input>
	</view>
	<view class="cu-form-group ">
		<view class="title"><text class="color">*</text>经营地址</view>
		<input placeholder="经营地址" @input="inputAdress"></input>
	</view>
	<view class="cu-form-group ">
		<view class="title"><text class="color">*</text>经营品类</view>
		<input placeholder="经营品类" @input="inputPin"></input>
	</view>
	<view class="cu-form-group ">
		<view class="title"><text class="color">*</text>经营产品</view>
		<input placeholder="经营产品" @input="inputChan"></input>
	</view>
	<view class="cu-form-group ">
		<view class="title"><text class="color">*</text>店铺电话</view>
		<input placeholder="店铺电话" @input="inputPhone"></input>
	</view>
	<view class="cu-bar bg-white margin-top">
		<view class="action">
			<text class="color">*</text>办公场景照
		</view>
		<view class="action">
			{{store_img}}
		</view>
	</view>
	<view class="cu-form-group">
		<view class="grid col-4 grid-square flex-sub">
			<view v-for="(item, index) in workList" :key="index" class="bg-img" @tap="ViewImage" :data-url="workList[index]">
				<image :src="workList[index]" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg1" :data-index="index">
					<text class="cuIcon-close"></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" data-index="0" v-if="workList.length<4">
				<text class="cuIcon-cameraadd"></text>
			</view>
		</view>
	</view>
	<view class="cu-bar bg-white margin-top">
		<view class="action">
			<text class="color">*</text>团队照
		</view>
		<view class="action">
			{{daimai_img}}
		</view>
	</view>
	<view class="cu-form-group">
		<view class="grid col-4 grid-square flex-sub">
			<view v-for="(item, index) in teamList" :key="index" class="bg-img" @tap="ViewImage" :data-url="teamList[index]">
				<image :src="teamList[index]" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
					<text class="cuIcon-close"></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" data-index="1" v-if="teamList.length<4">
				<text class="cuIcon-cameraadd"></text>
			</view>
		</view>
	</view>
	<view class="cu-bar bg-white margin-top">
		<view class="action">
			<text class="color">*</text>法人身份证
		</view>
		<view class="action">
			{{faren_img}}
		</view>
	</view>
	<view class="cu-form-group">
		<view class="grid col-4 grid-square flex-sub">
			<view v-for="(item, index) in idList" :key="index" class="bg-img" @tap="ViewImage" :data-url="idList[index]">
				<image :src="idList[index]" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg3" :data-index="index">
					<text class="cuIcon-close"></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" data-index="2" v-if="idList.length<4">
				<text class="cuIcon-cameraadd"></text>
			</view>
		</view>
	</view>
	<view class="cu-bar bg-white margin-top">
		<view class="action">
			营业执照
		</view>
		<view class="action">
			{{zhizhao_img}}
		</view>
	</view>
	<view class="cu-form-group">
		<view class="grid col-4 grid-square flex-sub">
			<view v-for="(item, index) in busList" :key="index" class="bg-img" @tap="ViewImage" :data-url="busList[index]">
				<image :src="busList[index]" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg4" :data-index="index">
					<text class="cuIcon-close"></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" data-index="3" v-if="busList.length<4">
				<text class="cuIcon-cameraadd"></text>
			</view>
		</view>
	</view>
	<view class="cu-bar bg-white margin-top">
		<view class="action">
			开户许可证
		</view>
		<view class="action">
			{{kaihu_img}}
		</view>
	</view>
	<view class="cu-form-group">
		<view class="grid col-4 grid-square flex-sub">
			<view v-for="(item, index) in xuList" :key="index" class="bg-img" @tap="ViewImage" :data-url="xuList[index]">
				<image :src="xuList[index]" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg5" :data-index="index">
					<text class="cuIcon-close"></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" data-index="4" v-if="xuList.length<4">
				<text class="cuIcon-cameraadd"></text>
			</view>
		</view>
	</view>
	<view class="cu-bar bg-white margin-top">
		<view class="action">
			其他证明
		</view>
		<view class="action">
			{{qt_img}}
		</view>
	</view>
	<view class="cu-form-group">
		<view class="grid col-4 grid-square flex-sub">
			<view v-for="(item, index) in otherList" :key="index" class="bg-img" @tap="ViewImage" :data-url="otherList[index]">
				<image :src="otherList[index]" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg6" :data-index="index">
					<text class="cuIcon-close"></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" data-index="5" v-if="otherList.length<4">
				<text class="cuIcon-cameraadd"></text>
			</view>
		</view>
	</view>
</form>
<view class="padding flex flex-direction">
  <button class="cu-btn bg-blue lg" @tap="submit">提交</button>
</view>
</view>
</template>

<script>
import api from "../../../api";
var app = getApp();

export default {
  data() {
    return {
      workList: [],
      teamList: [],
      idList: [],
      busList: [],
      xuList: [],
      otherList: [],
      user_id: '',
      name: '',
      store_name: '',
      address: '',
      category: '',
      product: '',
      phone: '',
      store_img: '',
      daimai_img: '',
      faren_img: '',
      zhizhao_img: '',
      kaihu_img: '',
      qt_img: '',
      imgurl: ''
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    wx.getStorage({
      key: 'userId',
      success: res => {
        this.setData({
          user_id: res.data
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    ChooseImage(e) {
      var _this = this;

      var idx = e.currentTarget.dataset.index;
      console.log(idx);
      wx.chooseImage({
        count: 1,
        //默认9
        sizeType: ['original', 'compressed'],
        //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'],
        //从相册选择
        success: res => {
          wx.uploadFile({
            url: api.default.wq_uplode_img,
            filePath: res.tempFilePaths[0],
            name: 'file',
            header: {
              "Content-Type": "multipart/form-data"
            },
            success: function (res) {
              console.log(res);

              _this.setData({
                imgurl: res.data
              });

              console.log(_this.imgurl);
            },
            fail: function (err) {
              console.log(err);
            }
          });

          if (idx == '0') {
            if (this.workList.length != 0) {
              this.setData({
                workList: this.workList.concat(res.tempFilePaths),
                store_img: this.store_img + ',' + this.imgurl
              });
            } else {
              this.setData({
                workList: res.tempFilePaths,
                store_img: this.imgurl
              });
            }
          }

          if (idx == '1') {
            if (this.teamList.length != 0) {
              this.setData({
                teamList: this.teamList.concat(res.tempFilePaths),
                daimai_img: this.daimai_img + ',' + this.imgurl
              });
            } else {
              this.setData({
                teamList: res.tempFilePaths,
                daimai_img: this.imgurl
              });
            }
          }

          if (idx == '2') {
            if (this.idList.length != 0) {
              this.setData({
                idList: this.idList.concat(res.tempFilePaths),
                faren_img: this.faren_img + ',' + this.imgurl
              });
            } else {
              this.setData({
                idList: res.tempFilePaths,
                faren_img: this.imgurl
              });
            }
          }

          if (idx == '3') {
            if (this.busList.length != 0) {
              this.setData({
                busList: this.busList.concat(res.tempFilePaths),
                zhizhao_img: this.zhizhao_img + ',' + this.imgurl
              });
            } else {
              this.setData({
                busList: res.tempFilePaths,
                zhizhao_img: this.imgurl
              });
            }
          }

          if (idx == '4') {
            if (this.xuList.length != 0) {
              this.setData({
                xuList: this.xuList.concat(res.tempFilePaths),
                kaihu_img: this.kaihu_img + ',' + this.imgurl
              });
            } else {
              this.setData({
                xuList: res.tempFilePaths,
                kaihu_img: this.imgurl
              });
            }
          }

          if (idx == '5') {
            if (this.otherList.length != 0) {
              this.setData({
                otherList: this.otherList.concat(res.tempFilePaths),
                qt_img: this.qt_img + ',' + this.imgurl
              });
            } else {
              this.setData({
                otherList: res.tempFilePaths,
                qt_img: this.imgurl
              });
            }
          }
        }
      });
    },

    ViewImage(e) {
      wx.previewImage({
        urls: this.imgList,
        current: e.currentTarget.dataset.url
      });
    },

    DelImg1(e) {
      wx.showModal({
        title: '删除图片',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.workList.splice(e.currentTarget.dataset.index, 1);
            this.setData({
              workList: this.workList
            });
          }
        }
      });
    },

    DelImg2(e) {
      wx.showModal({
        title: '删除图片',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.teamList.splice(e.currentTarget.dataset.index, 1);
            this.setData({
              teamList: this.teamList
            });
          }
        }
      });
    },

    DelImg3(e) {
      wx.showModal({
        title: '删除图片',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.idList.splice(e.currentTarget.dataset.index, 1);
            this.setData({
              idList: this.idList
            });
          }
        }
      });
    },

    DelImg4(e) {
      wx.showModal({
        title: '删除图片',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.busList.splice(e.currentTarget.dataset.index, 1);
            this.setData({
              busList: this.busList
            });
          }
        }
      });
    },

    DelImg5(e) {
      wx.showModal({
        title: '删除图片',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.xuList.splice(e.currentTarget.dataset.index, 1);
            this.setData({
              xuList: this.xuList
            });
          }
        }
      });
    },

    DelImg6(e) {
      wx.showModal({
        title: '删除图片',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.otherList.splice(e.currentTarget.dataset.index, 1);
            this.setData({
              otherList: this.otherList
            });
          }
        }
      });
    },

    inputName(e) {
      this.setData({
        name: e.detail.value
      });
    },

    inputShopName(e) {
      this.setData({
        store_name: e.detail.value
      });
    },

    inputAdress(e) {
      this.setData({
        address: e.detail.value
      });
    },

    inputPin(e) {
      this.setData({
        category: e.detail.value
      });
    },

    inputChan(e) {
      this.setData({
        product: e.detail.value
      });
    },

    inputPhone(e) {
      this.setData({
        phone: e.detail.value
      });
    },

    // 提交表单
    submit() {
      console.log('提交' + this.store_img);

      if (this.name, this.store_name, this.address, this.category, this.product, this.phone) {
        app.globalData.request({
          url: api.default.user_certification,
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          data: {
            user_id: this.user_id,
            store_name: this.name,
            phone: this.phone,
            address: this.address,
            category: this.category,
            product: this.product,
            name: this.name,
            store_img: this.store_img,
            daimai_img: this.daimai_img,
            faren_img: this.faren_img,
            zhizhao_img: this.zhizhao_img,
            kaihu_img: this.kaihu_img,
            qt_img: this.qt_img
          },
          method: 'POST',
          success: res => {
            console.log(res);

            if (res.msg == "认证已提交,正等待管理员审核!") {
              wx.showToast({
                title: res.msg,
                icon: 'none'
              });
              setTimeout(function () {
                wx.navigateBack({
                  delta: 1
                });
              }, 1500);
            } else {
              wx.showToast({
                title: res.msg,
                icon: 'none'
              });
            }
          }
        });
      } else {
        wx.showToast({
          title: '请将标红必填项填写完整',
          icon: 'none'
        });
      }
    }

  }
};
</script>
<style>
@import "./ruzhu.css";
</style>